<template>
    <div class="setComponent">
        <div class="form-item">
            <el-tooltip class="item" effect="dark" content="默认值5" placement="top-start">
                <label>开启无缝滚动的数据量<i style="color:#ccc;" class="el-icon-info"/></label>
            </el-tooltip>
            <el-slider v-model="obj.classOptions.limitMoveNum" :min="1" :max="10"/>
        </div>
        <div class="form-item">
            <el-tooltip class="item" effect="dark" content="数值越大速度滚动越快" placement="top-start">
                <label>滚动速度 <i style="color:#ccc;" class="el-icon-info"/></label>
            </el-tooltip>
            <el-input-number v-model="obj.classOptions.step"/>
        </div>

        <div class="form-item">
            <label>图片左右间隔 <i style="color:#ccc;" class="el-icon-info"/></label>
            <el-input-number v-model="obj.padding"/>
        </div>
        <div class="form-item">
            <label>图片容器宽度 <i style="color:#ccc;" class="el-icon-info"/></label>
            <el-input-number v-model="obj.width"/>
        </div>
        <div class="form-item">
            <label>图片容器高度 <i style="color:#ccc;" class="el-icon-info"/></label>
            <el-input-number v-model="obj.height"/>
        </div>
        <div class="form-item">
            <label>滚动方向</label>
            <el-select v-model="obj.classOptions.direction" clearable placeholder="请选择">
                <el-option
                    v-for="(item,itemIndex) in directionOptions"
                    :key="itemIndex"
                    :label="item.label"
                    :value="item.value"/>
            </el-select>
        </div>
        <div class="form-item">
            <label>是否启用鼠标hover控制</label>
            <el-switch
                v-model="obj.classOptions.hoverStop"
                active-text="启用"
                inactive-text="禁止"
                active-color="#13ce66"
                inactive-color="#ff4949"/>
        </div>
        <div class="form-item">
            <label>图片</label>
            <el-button size="small" type="primary" @click="uploadClick">上传图片</el-button>
        </div>
    </div>
</template>
<script>
import { animateOptions } from '@/utils/animateOptions'
import { columnOptions } from '@/utils/selectOptions'
export default {
    name: 'ThreeColumns',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            options: animateOptions,
            columnOptions: columnOptions,
            directionOptions: [
                { label: '往下', value: 0 },
                { label: '往上', value: 1 },
                { label: '往左', value: 2 },
                { label: '往右', value: 3 }
            ]
        }
    },
    methods: {
        uploadClick() {
            this.$emit('uploadClick', this.obj)
        }
    }
}
</script>
<style lang="scss">

</style>

